enum Player {
  X = 'x',
  O = 'o'
}
// 单元格列表
let cells = document.querySelectorAll('.cell')
// 游戏面板
let gameBord = document.querySelector('#bord')
// 获胜信息面板
let message = document.querySelector('#message') as HTMLDivElement
// 获胜者
let winner = document.querySelector('#winner') as HTMLParagraphElement
// 当前玩家
let currentPlayer: Player
// 重新开始按钮
let restart = document.querySelector('#restart') as HTMLButtonElement
// 判赢数组
let winsArr = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]
]
// 记录已下棋的次数
let steps: number

// 给重新开始绑定点击事件
restart.addEventListener('click', startGame)

// 调用函数初始化，开始游戏
startGame()

function startGame() {
  // 隐藏获胜信息
  message.style.display = 'none'
  // 重置下棋次数
  steps = 0
  // 重置默认玩家为x
  currentPlayer = Player.X
  // 重置下棋提示为x
  gameBord.classList.remove(Player.X, Player.O)
  gameBord.classList.add(Player.X)
  // 清空棋盘
  cells.forEach(function(item) {
    let cell = item as HTMLDivElement
    cell.classList.remove(Player.X, Player.O)
    // 移除单元格点击事件，重新给单元格绑定点击事件
    cell.removeEventListener('click', clickCell)
    cell.addEventListener('click', clickCell, { once: true})
  })
  
}

// cells.forEach(function (item) {
//   // console.log(item)
//   let cell = item as HTMLDivElement
//   cell.addEventListener('click', clickCell, { once: true })
// })

// 棋盘中单元格的click事件处理程序
function clickCell(event: MouseEvent) {
  let target = event.target as HTMLDivElement
  target.classList.add(currentPlayer)

  steps++

  // 调用判赢函数是否获胜
  let isWin = checkWin(currentPlayer)
  if (isWin) {
    message.style.display = 'block'
    winner.innerText = currentPlayer + '赢了'
    // 因为游戏已经结束，所以此处直接return，来刻意阻止后续代码执行
    return
  }

  // 判断平局
  if(steps === 9) {
    message.style.display = 'block'
    winner.innerText = '平局'
    // 因为游戏已经结束，所以此处直接return，来刻意阻止后续代码执行
    return
  }

  // 根据当前玩家，得到另外一个玩家
  currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
  // 处理下一步提示：移除游戏面板中的x和o类名，添加下一个玩家类名
  gameBord.classList.remove(Player.X, Player.O)
  gameBord.classList.add(currentPlayer)
}

// 封装判赢函数
function checkWin(player: Player) {
  return winsArr.some(function (item) {
    // 判断这三个单元格元素是否同时包含当前玩家的类名
    if (
      // cells[item[0]].classList.contains(player) &&
      // cells[item[1]].classList.contains(player) &&
      // cells[item[2]].classList.contains(player)
      hasClass(cells[item[0]], player) &&
      hasClass(cells[item[1]], player) &&
      hasClass(cells[item[2]], player)
    ) {
      return true
    }
    return false
  })
}

// 判断单元格元素是否同时包含当前玩家的类名函数
function hasClass(el: Element, name: string ) {
  return el.classList.contains(name)
}